import { memo } from 'react';
import type { ReactNode, FC } from 'react';
import { CapTchaLoginWrapper } from './style';
import { Button, Col, Form, Input, Row, Select } from 'antd';
import { loginStatus, sentCaptchaByPhone, verifyCaptcha } from '../../service/login';

const { Option } = Select;
interface IProps {
  children?: ReactNode;
  setStatus: (val: string) => void;
  setOpen: () => void;
}

const CaptchaLogin: FC<IProps> = (props) => {
  const { setStatus, setOpen } = props;
  const [form] = Form.useForm();
  const prefixSelector = (
    <Form.Item name="prefix" noStyle>
      <Select style={{ width: 70 }} defaultValue="86">
        <Option value="86">+86</Option>
        <Option value="87">+87</Option>
      </Select>
    </Form.Item>
  );
  async function hanleCaptcha() {
    const value = form.getFieldsValue();
    const res = await sentCaptchaByPhone(value.phone);
  }

  async function handleLogin() {
    const value = form.getFieldsValue();
    const res = await verifyCaptcha(value.phone, value.captcha);
    if (res.data.code == 200) {
      setOpen();
    }
  }
  async function handleLoginStatus() {
    await loginStatus();
  }
  handleLoginStatus();
  return (
    <CapTchaLoginWrapper>
      <div className="content">
        <Form form={form}>
          <Form.Item name="phone" rules={[{ required: true, message: '请输入手机号' }]}>
            <Input addonBefore={prefixSelector} style={{ width: '100%' }} placeholder="请输入手机号" />
          </Form.Item>
          <Form.Item>
            <Row gutter={8}>
              <Col span={14}>
                <Form.Item name="captcha" noStyle rules={[{ required: true, message: '请输入短信验证码' }]}>
                  <Input placeholder="请输入短信验证码" />
                </Form.Item>
              </Col>
              <Col span={10}>
                <Button className="form-btn" onClick={hanleCaptcha}>
                  获取验证码
                </Button>
              </Col>
            </Row>
          </Form.Item>
        </Form>
        <a href="javascript:void(0)" className="login-btn" onClick={handleLogin}>
          登录
        </a>
      </div>
      <div className="password">
        <a
          href="javascript:void(0)"
          onClick={() => {
            setStatus('password');
          }}
        >
          密码登录
        </a>
      </div>
      <div className="another-login">
        <a
          href="javascript:void(0)"
          onClick={() => {
            setStatus('another');
          }}
        >
          {'<  其他登录方式'}
        </a>
      </div>
    </CapTchaLoginWrapper>
  );
};

export default memo(CaptchaLogin);
